<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 
            1.插槽的基本使用
            2.插槽的默认值
            3.插槽中如果有多个元素，则这些元素同时放入到组件中进行替换
         -->
        <cpn>
            <button>按钮0</button>
            <button>按钮1</button>
            <button>按钮2</button>
        </cpn>
        <cpn>
            <span>span标签</span>
        </cpn>
        <cpn>
            <i>i标签</i>
        </cpn>

        <cpn></cpn>
        <cpn></cpn>
        <cpn></cpn>
    </div>

    <template id="cpn">
        <div>
            <h2>我是组件</h2>
            <p>我是组件，哈哈哈</p>
            <!-- <slot></slot> 插槽可看作一个预留的空间，例如：nav-bar每个页面可能显示的不一样；抽取共性，保留不同 -->
            <slot>
                <button>按钮</button> <!-- 插槽的默认值 -->
            </slot>
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: "你好呀",
            },
            components: {
                cpn: {
                    template: '#cpn',
                }
            }
        })
    </script>
</body>

</html>